<!--
 * @Author: ZHM zhuimin111@163.com
 * @Date: 2023-04-24 18:04:21
 * @LastEditors: ZHM zhuimin111@163.com
 * @LastEditTime: 2023-05-11 09:45:01
-->
<template>
  <el-drawer v-model="visible"
    append-to-body
    class="operation-log"
    :with-header="false"
    :show-close="false"
    direction="rtl"
    size="100%">
    <div class="operation-log-header">
      <span class="title-info">操作记录</span>
      <el-button type="danger"
        plain
        @click="handleClose">关闭</el-button>
    </div>
    <div class="operation-Log-container">
      <el-tabs v-model="activeName"
        class="operation-tabs">
        <el-tab-pane label="审批意见"
          name="first">
          <el-form-item label="审批意见">
            <el-input type="textarea"
              rows="4"
              placeholder="请输入审核意见内容"
              v-model="note" />
          </el-form-item>
          <div class="operation-footer">
            <el-button type="primary"
              @click="ok(note)">确定
            </el-button>
            <el-button @click="handleClose">取消</el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane label="操作记录"
          name="third"
          style="height:100%">
          <div class="operation-Log-tablebox">
            <rk-grid ref="operationLogRef"
              method="get"
              :params="workManageParams"
              boxConfig="false"
              :dataUrl="'/task/operateRecord'"
              :pagerConfig="false"
              :columns="columns">
              <template #process="{ row }">
                <div>
                  【{{ row.prevTaskName }}】-><span class="tagName">【{{ row.currentTaskName }}】</span>
                  <span v-if="row.nextTaskName!=null">->【{{ row.nextTaskName }}】</span>
                  <span v-if="row.assignee!=null">（{{ row.assignee }}）</span>
                </div>
              </template>
            </rk-grid>
          </div>
        </el-tab-pane>
        <el-tab-pane label="流程图"
          class="workImg-content"
          name="second">
          <div v-html="workImg"></div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-drawer>
</template>
<script  setup name="OperationLog">
import { ref, reactive } from 'vue';
import { getProcessImg } from "@/api/api-task";
const activeName = ref('first')
const operationLogRef = ref('')
let workImg = ref('');
let workManageParams = reactive({
  objectId: ''
})
// 意见
const note = ref("")
const visible = ref(false)
//表格
const columns = ref(
  [
    { field: 'actionTypeName', title: '类型', width: 100, align: 'center', headerAlign: 'center' },
    { field: 'prevName', title: '任务过程', align: 'left', slots: { default: 'process' }, headerAlign: 'center' },
    { field: 'startTime', title: '开始时间', width: 200, align: 'center', headerAlign: 'center' },
    { field: 'endTime', title: '结束时间', width: 200, showHeaderOverflow: true, align: 'center', headerAlign: 'center' },
    { field: 'opinion', title: '意见', showOverflow: true, align: 'center', headerAlign: 'center' }
  ]
)
// 获取工作流图片
const getProcessImgData = async () => {
  const result = await getProcessImg({ objectId: workManageParams.objectId });
  const { data, code, msg } = result
  if (code === 200) {
    workImg.value = data
  } else { }
}
// 打开Drawer
const handleOpen = (applyId) => {
  workManageParams.objectId = applyId
  visible.value = true;
  getProcessImgData();
  nextTick(() => {
    handleSearch();
  })
}

/**查询 */
const handleSearch = () => {
  operationLogRef.value.searchEvent()
}

// 关闭Drawer
function handleClose() {
  note.value = ''
  visible.value = false;
}

// 对外暴露方法
defineExpose({
  handleOpen
})

</script>
<style lang="scss" scoped>
.operation-Log-container {
  padding: 20px;
  height: calc(100% - 50px);
}
.operation-log-header {
  width: 100%;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #ebeef5;
  background-color: #e3f2fe;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .title-info {
    font-size: 18px;
  }
}
.workImg-content {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.operation-tabs {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.operation-Log-tablebox {
  height: 100%;
}
.tagName {
  color: rgb(236, 70, 70);
}
// .{
//   color:#f56c6c;
// }
.operation-footer{

}
</style>
<style lang="scss">
.operation-log {
  .el-drawer__body {
    padding: 0;
  }
  .el-tabs__content {
    height: 100%;
  }
}
</style>